import { useState, useEffect } from 'react'
import axios from 'axios';
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
const baseURL = "http://120.27.154.49:13000/newland/sensors/data";
// const baseURL = "http://localhost:13000/newland/sensors/data";

function App() {
  const [co2, setCo2] = useState(0);
  const [airTemp, setAirTemp] = useState(0);
  const [airHum, setAirHum]= useState(0);
  const [soilHum, setSoilHum] = useState(0);
  const [soilTemp, setSoilTemp] = useState(0);
  const [ph, setPh] = useState(0);
  const [light, setLight] = useState(0);


  useEffect(() => {
    axios.get(baseURL).then((response) => {
    console.log("获取传感器数据成功");
    console.log(response.data);

    setCo2(response.data?.co_2);
    setAirTemp(response.data?.m_temp);
    setAirHum(response.data?.m_hum);
    setSoilHum(response.data?.t_hum1);
    setSoilTemp(response.data?.t_tem1);
    setPh(response.data?.t_ph);
    setLight(response.data?.light);
    });
  }, []);
  

  return (
    <div className="container">
        <header>
          <h1>茄子生长时间线展示</h1>
          <p className="subtitle">从播种前准备到成熟采收的完整生长周期记录</p>
        </header>
        <div className="timeline">
          {/* 阶段 1: 播种前准备 */}
          <div className="timeline-item">
            <div className="timeline-date">
              <h3>第 -7 天</h3>
            </div>
            <div className="timeline-content">
              <div className="stage">播种准备</div>
              <div className="timeline-img" style={{backgroundColor: '#8d6e63', backgroundImage: 'url("https://images.unsplash.com/photo-1507764923504-cd90bf7da772?auto=format&fit=crop&w=600&q=80")'}} />
              <div className="description">
                <p>在播种前7天，需要对土壤进行准备工作。选择疏松肥沃、排水良好的土壤，进行深翻并施入腐熟有机肥提高土壤肥力。</p>
                <p>此时土壤需要进行消毒处理，可采用高温闷棚或药剂处理，杀灭土壤中的病菌和虫卵。调节土壤pH值至6.5-7.0之间，这是茄子生长的最佳酸碱度。</p>
              </div>
              <table className="params-table">
                <tbody><tr>
                    <th>参数</th>
                    <th>数值</th>
                  </tr>
                  <tr>
                    <td>土壤酸碱度(pH)</td>
                    <td>{ph}</td>
                  </tr>
                  <tr>
                    <td>土壤温度</td>
                    <td>{soilTemp}℃</td>
                  </tr>
                  <tr>
                    <td>土壤湿度</td>
                    <td>{soilHum}%</td>
                  </tr>
                  <tr>
                    <td>空气温度</td>
                    <td>{airTemp}℃</td>
                  </tr>
                  <tr>
                    <td>空气湿度</td>
                    <td>{airHum}%</td>
                  </tr>
                  <tr>
                    <td>光照强度</td>
                    <td>{light}</td>
                  </tr>
                  <tr>
                    <td>二氧化碳浓度</td>
                    <td>{co2}ppm</td>
                  </tr>
                </tbody></table>
              <div className="tip">💡 小贴士：播种前可用50℃温水浸种15分钟，然后用常温水浸泡8-12小时，可提高发芽率</div>
            </div>
          </div>
          {/* 阶段 2: 幼苗期 */}
          <div className="timeline-item">
            <div className="timeline-date">
              <h3>第 3 天</h3>
            </div>
            <div className="timeline-content">
              <div className="stage">刚破土幼苗</div>
              <div className="timeline-img" style={{backgroundColor: '#7cb342', backgroundImage: 'url("https://images.unsplash.com/photo-1559027615-2260c1b96f54?auto=format&fit=crop&w=600&q=80")'}} />
              <div className="description">
                <p>播种后第3天，茄子种子开始发芽，幼苗破土而出。此时幼苗茎细长，呈嫩绿色，顶端子叶舒展，色泽鲜亮。</p>
                <p>这是茄子生长的关键时期，需要特别注意保持土壤湿润但不过湿，避免幼苗倒伏。适当的光照有助于幼苗健壮生长。</p>
              </div>
              <table className="params-table">
                <tbody><tr>
                    <th>参数</th>
                    <th>数值</th>
                  </tr>
                  <tr>
                    <td>土壤酸碱度(pH)</td>
                    <td>6.5 - 7.0</td>
                  </tr>
                  <tr>
                    <td>土壤温度</td>
                    <td>20 - 25℃</td>
                  </tr>
                  <tr>
                    <td>土壤湿度</td>
                    <td>60%</td>
                  </tr>
                  <tr>
                    <td>空气温度</td>
                    <td>22 - 28℃</td>
                  </tr>
                  <tr>
                    <td>空气湿度</td>
                    <td>50%</td>
                  </tr>
                  <tr>
                    <td>光照强度</td>
                    <td>8,000 - 10,000勒克斯</td>
                  </tr>
                  <tr>
                    <td>二氧化碳浓度</td>
                    <td>400 - 600ppm</td>
                  </tr>
                </tbody></table>
              <div className="tip">🌱 注意：幼苗期需保持土壤湿润但不积水，可覆盖地膜保墒增温</div>
            </div>
          </div>
          {/* 阶段 3: 幼苗生长期 */}
          <div className="timeline-item">
            <div className="timeline-date">
              <h3>第 10 天</h3>
            </div>
            <div className="timeline-content">
              <div className="stage">幼苗期</div>
              <div className="timeline-img" style={{backgroundColor: '#66bb6a', backgroundImage: 'url("https://images.unsplash.com/photo-1592499504214-898e8d4ad0e4?auto=format&fit=crop&w=600&q=80")'}} />
              <div className="description">
                <p>播种后约10天，茄子幼苗已长出几片嫩绿叶片，叶片小巧且边缘略带锯齿。幼苗扎根于土壤之中，土壤疏松透气。</p>
                <p>此时，土壤酸碱度pH值在6.5-7.0之间，土壤温度保持在20-25℃，土壤湿度在60%左右，空气温度约25℃，空气湿度在60%，光照强度适中，满足茄子光合作用需求，二氧化碳浓度在400-600ppm。此阶段茄子开始结果，适宜的环境有助于果实良好发育。</p>
              </div>
              <table className="params-table">
                <tbody><tr>
                    <th>参数</th>
                    <th>数值</th>
                  </tr>
                  <tr>
                    <td>土壤酸碱度(pH)</td>
                    <td>6.5 - 7.0</td>
                  </tr>
                  <tr>
                    <td>土壤温度</td>
                    <td>20 - 25℃</td>
                  </tr>
                  <tr>
                    <td>土壤湿度</td>
                    <td>60%</td>
                  </tr>
                  <tr>
                    <td>空气温度</td>
                    <td>22 - 28℃</td>
                  </tr>
                  <tr>
                    <td>空气湿度</td>
                    <td>70%</td>
                  </tr>
                  <tr>
                    <td>光照强度</td>
                    <td>8,000 - 10,000勒克斯</td>
                  </tr>
                  <tr>
                    <td>二氧化碳浓度</td>
                    <td>400 - 600ppm</td>
                  </tr>
                </tbody></table>
              <div className="tip">🌿 建议：当幼苗长到3-4片真叶时，可进行间苗，保持株距，避免过度拥挤</div>
            </div>
          </div>
          {/* 阶段 4: 植株生长期 */}
          <div className="timeline-item">
            <div className="timeline-date">
              <h3>第 25 天</h3>
            </div>
            <div className="timeline-content">
              <div className="stage">植株生长期</div>
              <img src="https://via.placeholder.com/300x230?text=茄子植株生长期" alt="茄子植株生长期" className="timeline-img" />
              <div className="description">
                <p>播种后约25天，茄子植株已扎根于棕褐色土壤中，占据画面中心偏上位置。叶子呈绿色，形状较大且宽阔，叶脉清晰可见，植株茎干呈紫黑色。</p>
                <p>此时土壤酸碱度pH值在6.5-7.0之间，土壤温度20-25℃，土壤湿度保持在60%；空气温度25-30℃，空气湿度60%。光照充足，每天光照时长8-10小时，二氧化碳浓度400-600ppm，整体环境适宜茄子生长。</p>
              </div>
              <table className="params-table">
                <tbody><tr>
                    <th>参数</th>
                    <th>数值</th>
                  </tr>
                  <tr>
                    <td>土壤酸碱度(pH)</td>
                    <td>6.5 - 7.0</td>
                  </tr>
                  <tr>
                    <td>土壤温度</td>
                    <td>20 - 25℃</td>
                  </tr>
                  <tr>
                    <td>土壤湿度</td>
                    <td>60%</td>
                  </tr>
                  <tr>
                    <td>空气温度</td>
                    <td>25 - 30℃</td>
                  </tr>
                  <tr>
                    <td>空气湿度</td>
                    <td>60%</td>
                  </tr>
                  <tr>
                    <td>光照</td>
                    <td>8-10小时/天</td>
                  </tr>
                  <tr>
                    <td>二氧化碳浓度</td>
                    <td>400 - 600ppm</td>
                  </tr>
                </tbody></table>
              <div className="tip">⚠️ 提示：此时可开始施用稀释的氮磷钾复合肥，促进植株健壮生长</div>
            </div>
          </div>
        </div>
        <footer>
          <p>© 2023 蔬菜生长观察 | 本页面展示了茄子从播种前准备到成熟采收的完整生长周期</p>
          <p>实际种植中，请根据当地气候条件和品种特性调整管理措施</p>
        </footer>
      </div>
  )
}

export default App
